{extend name="base"}
{block name="main"}

<div id="app" v-cloak>
	<el-menu mode="horizontal" :default-active="wsNav.activeIndex">
		<el-menu-item :index="v.name" v-for="v of nav" class="p0">
			<a class="block p_x20" :href="v.href" v-text="v.title"></a>
		</el-menu-item>
	</el-menu>
	
	<el-row class="ws-quote">
		<el-col :span="18">
			<el-button type="primary" size="small" @click="href('{:url('software/index',['dev'=>$params['dev']])}')">返回账号列表</el-button>
			<el-button @click="onSubmit(true,'{:url(\'del\')}',{ids:checkData,soft_id:softId})" :disabled="!checkData.length" type="danger" size="small">删除</el-button>
			<el-tag>{$soft.name}</el-tag> 的好友列表
		</el-col>
		
	</el-row>

	<el-table @selection-change="selectionChange" :data="tableData" border stripe>
		<el-table-column type="selection" width="40"></el-table-column>
		<el-table-column prop="id" label="ID" align="center" width="80"></el-table-column>
		<el-table-column prop="name" label="账号昵称" align="center" width="300"></el-table-column>
		<el-table-column prop="number" label="号码（例：微信号）" align="center" width="300"></el-table-column>
		<el-table-column prop="sex" label="性别" width="100" align="center" sortable :formatter="sexFormats"></el-table-column>
		<el-table-column prop="s_time" label="同步时间" :formatter="dateFormats" sortable></el-table-column>
		<el-table-column label="操作">
			<template slot-scope="scope">
				<el-button type="danger" size="mini" @click="onGet('{:url(\'del\')}?id='+scope.row.id+'&soft_id='+softId,true)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	
	<div class="page">{$list->render()|raw}</div>


</div>

{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}

<script type="text/babel" type="text/javascript">
var app=new Vue({
	el:"#app",
	mixins:[wsMixins],
	data:{
		tableData:{$list->toJson()|raw}, // 列表数据
		nav:{$_nav|stripslashes|raw}, 
		checkData:[], // 选中数据
	},
	created(){
		console.log(this.tableData)
	},
	computed:{
		softId(){
			if(this.tableData.length){
				return this.tableData[0].soft_id;
			}
			return 0;
		}
	},
	methods:{
		// 用户选择发生改变
		selectionChange(data){
			this.checkData=data.map(item=>{
				return item.id;
			})
		},
	}
});
</script>

{/block}